<!--
 * @description: 
 * @Author: lal
 * @Date: 2020-03-13 14:02:40
 * @LastEditors: lal
 * @LastEditTime: 2020-08-15 11:04:37
 -->
<template>
  <div class="wrapper">
    <!-- <Header class="header"></Header> -->
    <Sidebar class="sidebar"></Sidebar>
    <div class="view-box">
      <div>
        <!-- 路由内容区域 -->
        <transition name="fade-transform" mode="out-in">
          <keep-alive>
            <router-view :key="$route.fullPath"></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
// import Header from "./components/Header.vue";
import Sidebar from "./components/Sidebar.vue";
export default {
  data() {
    return {
      //   collapse: true
    };
  },
  components: {
    // Header,
    Sidebar,
  },
  computed: {},

  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  justify-content: flex-start;
}
.view-box {
  flex: 1;
  padding: 20px;
}
.sidebar {
  width: 65px;
  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
